<template>
  <div class="footer">
    <div class="wrap">
      <div class="footer-top">
        <div class="footer-item item-1">
          <span class="title">下载酷我音乐客户端</span>
          <div class="download">
            <div class="down-child">
              <i class="iconfont icon-windows-fill logo" />
              <span class="pc">PC版</span>
            </div>
            <div class="down-child">
              <i class="iconfont icon-anzhuo logo" />
              <span class="pc">Android</span>
            </div>
            <div class="down-child">
              <i class="iconfont icon-pingguo logo" />
              <span class="pc">iPhone版</span>
            </div>
          </div>
        </div>
        <div class="footer-item item-2">
          <span class="title">协议与声明</span>
          <div>
            <span class="safe">用户服务协议</span>
            <span class="safe">免责声明</span>
            <span class="safe">用户权限</span>
          </div>
          <div>
            <span class="safe">儿童隐私政策</span>
            <span class="safe">隐私政策</span>
            <span class="safe">权利声明</span>
          </div>
        </div>
        <div class="footer-item item-3">
          <span class="title">其他</span>
          <div>
            <span class="safe">联系我们</span>
            <span class="safe">腾讯音乐</span>
            <span class="safe">诚聘英才</span>
          </div>
          <div>
            <span class="safe">广告服务</span>
            <span class="safe">网上有害信息举报专区</span>
          </div>
        </div>
        <div class="footer-item item-4">
          <span class="title">合作链接</span>
          <span class="music">QQ音乐</span>
          <span class="book">酷狗听书</span>
        </div>
      </div>
      <div class="footer-bottom">
        <span>北京酷我科技有限公司版权所有 丨 网络文化经营许可证：京网文[2021]2071-554号 | 信息网络传播视听节目许可证0109362号 | 增值电信业务经营许可证B2-20090418 丨 京ICP证060261号 </span>
        <span>广播电视节目制作经营许可证京字第02037号 | 营业性演出许可证京市演1574 | 京公网安备11010502030216号 | 京ICP备09014827号|</span>
        <span>应用版本：9.4.4.0 丨 开发者：北京酷我科技有限公司 丨 举报电话：010-87939949丨 举报邮箱：support@kuwo.cn 丨 未成年人监督举报入口</span>
      </div>
    </div>

    <!-- <div class="bottom2">

    </div> -->
  </div>
</template>

<script>
export default {
  name: 'Footer'
}
</script>

<style lang="less" scoped>
span {
  padding-left: 0;
}

.footer {
  width: 100%;
  height: 400px;
  background-color: #1f1f1f;
  .wrap {
    width: 1300px;
    height: 100%;
    margin: 0 auto;
    .footer-top {
      height: 120px;
      display: flex;
      padding-top: 50px;
      justify-content: space-around;
      .footer-item {
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .title {
          font-size: 13px;
          cursor: pointer;
        }
        .download {
          display: flex;
          justify-content: space-between;
          .down-child {
            display: flex;
            flex-direction: column;
            margin-right: 30px;
            color: #ccc;
            .logo{
              margin-left: 10px;
        color: #808080;

            }
            .logo:hover{
              color: yellow;
            }
            .pc{
              font-size: 13px;
              margin-left: 3px;
              color: #808080;
              cursor: pointer;

            }
            .pc:hover{
              color: yellow;
            }
            i {
              font-size: 30px;
              cursor: pointer;

            }
          }
        }
      }
      .safe {
        font-size: 13px;
        color: #808080;
        margin-right: 50px;
        cursor: pointer;

      }
      .safe:hover{
        color: yellow;
      }
      .music,.book {
        color: #808080;

        font-size: 13px;
        cursor: pointer;

      }
      .music:hover{
        color: yellow;
      }
      .book:hover{
        color: yellow;
      }
    }
    .footer-bottom {
      margin-top: 50px;
      display: flex;
      flex-direction: column;
      color: #808080;
      height: 100px;
      width: 100%;
      text-align: center;
      span{
      cursor: pointer;
      margin-top: 5px;
      }
      span:hover{
        color: yellow;
      }
    }
  }
}
</style>
